<!-- 科技培训 -->
<template>
	<div class="science">
		<titleBox :title="'科技培训'"></titleBox>
		<div class="science_box">
			<!-- <science v-if="dataList.science.length" :type="1" v-for="(science,i) in dataList.science" :list="science"></science> -->
			<div class="sclence" v-if="dataList.science.length" v-for="(science,i) in dataList.science">
				<img :src="'http:'+science.photoUrl" alt="">
				<div class="sclence_r">
					<p class="snp1">{{science.trainingName}}</p>
					<span>{{science.trainingStartTime}} - {{science.trainingEndTime}}</span>
					<button v-if="science.enrollStatus == 'notEnroll' || science.enrollStatus == 'failed'" class="btn1" @click="goDetail('baoming',science.trainingUuid)">报名</button>
					<button v-if="science.enrollStatus == 'learning'||science.enrollStatus == 'enroll'" class="btn2" @click="goDetail('jx',science.trainingUuid)">继续学习</button>
					<button v-if="science.enrollStatus == 'overEnroll'" class="btn3">已结束</button>
				</div>
			</div>
			<div class="errorIcon" v-if="!dataList.science.length">
				<img src="../../assets/error.png" alt="">
				<p>暂无数据</p>
			</div>
		</div>
	</div>
	<!-- <div class="science">
		<titleBox :title="'往期培训'"></titleBox>
		<div class="science_box">
			<science :type="3" v-for="(science,i) in 4"></science>
		</div>
	</div> -->
</template>

<script setup>
	import {unLoginRecentTraining} from '../../api/home.js'
	import science from '../../components/science.vue'
	import titleBox from '../../components/titleBox.vue'
	import axios from "axios";
	import {reactive,onBeforeMount} from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		science:[]
	})
	onBeforeMount(()=> {
		getunLoginRecentTraining()
	})
	
	const getunLoginRecentTraining = ()=> {
		var data = {
			page: {
			  pageSize: 10
			},
			params: {
			  wxUserUuid: localStorage.getItem('userUuid')
			}
		}
		unLoginRecentTraining(data).then(res=> {
			dataList.science = res.data.list
		})
	}
	const goDetail = (name,id) => {
		if(name == 'baoming'){
			router.push({
				path:'/apply',
				query:{type:1,id:id}
			})
		}else if(name == 'jx'){
			router.push({
				path:'/apply',
				query:{type:2,id:id}
			})
		}else{
			
		}
	}
	
</script>

<style scoped lang="scss">
	.science{
		width: 1200px;
		min-height: 430px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;
		.science_box{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.sclence{
				display: flex;
				margin-top: 30px;
				width: 555px;
				background: #FFFFFF;
				border-radius: 10px;
				border: 1px solid rgba(17,145,142,0.1);
				padding: 15px;
				img{
					width: 200px;
					height: 150px;
					margin-right: 15px;
				}
				&_r{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					button{
						width: 92px;
						height: 33px;
						border-radius: 5px;
						font-size: 16px;
						font-weight: 600;
						color: #FFFFFF;
					}
					.btn1{
						background-color: #11918E;
					}
					.btn2{
						background-color: #69A800;
					}
					.btn3{
						background-color: #EDEDED;
						color: #B3B3B3;
					}
					// p{
					// 	width: 340px;
					// }
					span{
						
					}
				}
			}
		}
	}
</style>